<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 数据日期 -->
			<cl-filter label="数据日期">
				<cl-date-picker
					prop="erp_data_date"
					type="date"
					:width="120"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					placeholder="请选择日期"
				/>
			</cl-filter>
			<cl-flex1 />
			<!-- 导入 -->
			<cl-import-data-btn :onConfig="onConfig" :onSubmit="onSubmit" />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="店铺、ERP订单、订单编号" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>
	</cl-crud>
</template>

<script lang="ts" name="user-list" setup>
import { useCool } from "/@/cool";
import { onMounted } from "vue";
import { dayjs, ElMessage } from "element-plus";
import { useCrud, useTable } from "@cool-vue/crud";

const { service } = useCool();
const Crud = useCrud({ service: service.dr.erpOrders }, (app) => {
	app.refresh();
});
const onConfig = () => {
	return [
		{
			label: "店铺名称",
			prop: "store_name",
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			label: "数据日期",
			prop: "erp_data_date",
			required: true,
			component: {
				name: "el-date-picker",
				props: {
					format: "YYYY-MM-DD",
					type: "date",
					valueFormat: "YYYY-MM-DD"
				}
			}
		}
	];
};
const onSubmit = async (data, { done, close }) => {
	try {
		await service.dr.erpOrders.import(data);
		close();
		ElMessage.success(`已提交${data.list.length}条数据`);
		refresh();
	} catch (error) {
		error?.message && ElMessage.error(error?.message);
	}
};

// cl-table
const Table = useTable({
	columns: [
		{
			type: "index",
			width: 60,
			fixed: "left"
		},
		{
			label: "ERP订单编号",
			prop: "erp_order_number",
			minWidth: 190,
			fixed: "left"
		},
		{
			label: "订单编号",
			prop: "order_number",
			minWidth: 190,
			fixed: "left"
		},
		{
			label: "邮资成本",
			prop: "cost",
			minWidth: 190
		},
		{
			label: "店铺名称",
			prop: "store_name",
			minWidth: 140,
			fixed: "right"
		},
		{
			label: "数据日期",
			prop: "erp_data_date",
			sortable: "desc",
			minWidth: 140,
			fixed: "right",
			formatter(row) {
				return row.erp_data_date ? dayjs(row.erp_data_date).format("YYYY-MM-DD") : "";
			}
		}
	]
});

// 刷新列表
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

onMounted(() => {
	refresh();
});
</script>
